<template>
  <a-modal :open="visible" :title="title" width="750px" forceRender :destroyOnClose="true" :maskClosable="false"
    @cancel="onClose">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 4 }">
      <a-form-item label="捐赠方性质" name="blproperty">
        <a-radio-group :disabled="canEdit" v-model:value="form.blproperty" name="blproperty">
          <a-radio :value="0">校友</a-radio>
          <a-radio :value="1">非校友</a-radio>
          <a-radio :value="2">校友企业</a-radio>
          <a-radio :value="3">非校友企业</a-radio>
          <a-radio :value="4">社会团体</a-radio>
          <a-radio :value="5">其它</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="捐赠方名称" name="bldonor">
        <a-input :disabled="canEdit" v-model:value="form.bldonor" placeholder="请输入捐赠方名称" />
      </a-form-item>
      <a-form-item label="性别" name="blsex">
        <a-radio-group :disabled="canEdit" v-model:value="form.blsex" name="blsex">
          <a-radio value="男">男</a-radio>
          <a-radio value="女">女</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="省份" name="blprovince">
        <a-select v-model:value="form.blprovince" style="width: 100%" allowClear placeholder="请选择省份"
          :disabled="canEdit">
          <a-select-option :value="item" v-for="item in province">{{ item }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="地址" name="bladdress">
        <a-input :disabled="canEdit" v-model:value="form.bladdress" placeholder="请输入地址" />
      </a-form-item>
      <a-form-item label="电话" name="blphone">
        <a-input :disabled="canEdit" v-model:value="form.blphone" placeholder="请输入电话" />
      </a-form-item>
      <a-form-item label="邮箱" name="blemail">
        <a-input :disabled="canEdit" v-model:value="form.blemail" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item label="生日" name="blbirthday">
        <a-date-picker :disabled="canEdit" :valueFormat="'YYYY-MM-DD'" ; style="width: 100%"
          v-model:value="form.blbirthday" />
      </a-form-item>
      <a-form-item label="说明" name="bldescription">
        <a-textarea :disabled="canEdit" v-model:value.trim="form.bldescription" placeholder="请输入说明"
          :auto-size="{ minRows: 2, maxRows: 5 }" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose" v-show="!canEdit">取消</a-button>
        <a-button type="primary" v-show="!canEdit" v-throttle @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { message } from 'ant-design-vue';
  import pcaa from 'china-area-data';
  import _ from 'lodash';
  import { nextTick, reactive, ref, defineProps, onMounted } from 'vue';
  import { DonaInfoApi } from '/@/api/basicManage/DonationManage/DonaInfo-api';
  import AreaCascader from '/@/components/framework/area-cascader/index.vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { regular } from '/@/constants/regular-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
  import moment from 'moment'; //日期转化
  defineExpose({
    showModal,
    showViewModal,
  });

  const emit = defineEmits(['refresh']);
  // ====== 标题===============
  const title = ref('');
  // 是否可编写
  const canEdit = ref(false);

  // --------------------- modal 显示与隐藏 ---------------------
  // 是否展示
  const visible = ref(false);

  function showModal(data) {
    Object.assign(form, formDefault);
    if (data.bldonorid && !_.isEmpty(data)) {
      Object.assign(form, data);
    }
    visible.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
    title.value = getTitle();
  }

  // ============查看modal =======
  function showViewModal(data) {
    Object.assign(form, formDefault);
    if (data.bldonorid && !_.isEmpty(data)) {
      Object.assign(form, data);
    }
    canEdit.value = true;
    visible.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
    title.value = getTitle();
  }
  // ============新增modal =======
  function getTitle() {
    let srt = '';
    if (!form.showView) {
      if (form.bldonorid) {
        srt = '编辑';
      } else {
        srt = '新增';
      }
    } else {
      srt = '查看';
    }
    return srt;
  }

  // --------------------- form 表单 ---------------------

  // 关闭弹框
  function onClose() {
    Object.assign(form, formDefault);
    delete form.showView;
    visible.value = false;
    canEdit.value = false;
  }
  // 邮箱正则
  const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;

  // --------------------- 表单 ---------------------

  //  组件
  const formRef = ref();

  const formDefault = {
    bldonorid: undefined, //
    bldonor: undefined, //名称
    blsex: undefined, //性别
    blemail: undefined, //邮箱
    blprovince: undefined, //省份
    bladdress: undefined, //地址
    blphone: undefined, //电话
    blbirthday: undefined, //生日
    bldescription: undefined, //描述 说明
    blproperty: undefined, //性质
  };
  let form = reactive({ ...formDefault });
  const rules = {
    blproperty: [{ required: true, message: '请选择捐赠方性质' }],
    bldonor: [{ required: true, message: '请输入捐赠方名称' }],
    blsex: [{ required: true, message: '请选择性别' }],
    blprovince: [{ required: true, message: '请选择省份' }],
    bladdress: [{ required: true, message: '请输入地址' }],
    blphone: [
      { required: true, message: '请输入电话' },
      { pattern: regular.phone, message: '请输入正确的手机号码', trigger: 'blur' },
    ],
    blemail: [
      { required: true, message: '请输入邮箱' },
      { pattern: regEmail, message: '请输入正确的邮箱', trigger: 'blur' },
    ],
    blbirthday: [{ required: true, message: '请选择生日' }],
    bldescription: [{ required: false, message: '请输入说明' }],
  };

  function onSubmit() {
    formRef.value
      .validate()
      .then(async () => {
        SmartLoading.show();
        try {
          form.blbirthday = moment(form.blbirthday).format('YYYY-MM-DD');
          if (form.bldonorid) {
            await DonaInfoApi.foundationUpdate(form);
          } else {
            await DonaInfoApi.foundationAdd(form);
          }
          message.success(`${form.bldonorid ? '修改' : '添加'}成功`);
          emit('refresh');
          onClose();
        } catch (error) {
          smartSentry.captureError(error);
        } finally {
          SmartLoading.hide();
        }
      })
      .catch((error) => {
        message.error('参数验证错误，请仔细填写表单数据!');
      });
  }
  const province = ref(); //省份
  // 省
  async function getProvince() {
    try {
      let res = await DonaInfoApi.ChinaFind();
      console.log(res, '省');
      province.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  onMounted(() => {
    getProvince();
  });
</script>

<style lang="less" scoped>
  .form-width {
    width: 100% !important;
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.ant-card-body) {
    padding: 10px;
  }
</style>